﻿@page "/toasts"

<Block Title="Toast 轻量弹窗" Introduction="提供轻量级 Toast 弹窗" CodeFile="toast.1.txt">
    <div class="form-inline">
        <div class="row overflow-hidden">
            <div class="form-group col-12 col-lg-4">
                <ToastBox class="d-block" Title="保存数据" IsAutoHide="false" Content="保存数据成功，4 秒后自动关闭"></ToastBox>
            </div>
            <div class="form-group col-12 col-lg-4">
                <ToastBox class="d-block" Category="ToastCategory.Error" Title="保存数据" IsAutoHide="false" Content="保存数据失败，4 秒后自动关闭"></ToastBox>
            </div>
            <div class="form-group col-12 col-lg-4">
                <ToastBox class="d-block" Category="ToastCategory.Information" Title="提示信息" IsAutoHide="false" Content="信息提示弹窗，4 秒后自动关闭"></ToastBox>
            </div>
            <div class="form-group col-12 col-sm-4">
                <Button Color="Color.Success" OnClick="@OnSuccessClick">成功通知</Button>
            </div>
            <div class="form-group col-12 col-sm-4">
                <Button Color="Color.Danger" OnClick="@OnErrorClick">失败通知</Button>
            </div>
            <div class="form-group col-12 col-sm-4">
                <Button Color="Color.Info" OnClick="@OnInfoClick">信息通知</Button>
            </div>
        </div>
    </div>
</Block>

<Block Title="Toast 手动关闭" Introduction="不会自动关闭，需要人工点击关闭按钮" CodeFile="toast.2.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12">
                <Button OnClick="@OnNotAutoHideClick">成功通知</Button>
            </div>
        </div>
    </div>
</Block>

<Block Title="Toast 显示位置" Introduction="提供设置 Toast 弹窗出现位置" CodeFile="toast.3.txt">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6">
                <Button OnClick="e => OnPlacementClick(Placement.TopEnd)">右上角</Button>
            </div>
            <div class="form-group col-6">
                <Button OnClick="e => OnPlacementClick(Placement.BottomEnd)">右下角</Button>
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<Toast @ref="Toast"></Toast>